﻿<%@ Control Language="VB" AutoEventWireup="false" CodeFile="Section03.ascx.vb" Inherits="Control_MSDS_Section03" %>
<style>
	.tbAddRow {
		margin-top: 5px;
	}
</style>
<asp:UpdatePanel ID="uplCauhoi1" runat="server">
	<ContentTemplate>
		<div style="clear: both; height: 20px"></div>
		<div class="BoxField">
			<div class="HeadTitle">
				<h3>
					<asp:Label ID="lbSection03Title" runat="server" Text="PHẦN III: NHẬN DẠNG NGUY HIỂM" /></h3>
			</div>
			<div class="DivRequired">
				<%--<span class="fieldRequired">&nbsp;</span><asp:Literal
					ID="ltrRequired" Text="Trường yêu cầu nhập dữ liệu" runat="server"></asp:Literal>--%>
			</div>
			<div class="Error">
				<%--<asp:ValidationSummary ID="ValidationSummary1" runat="server" ForeColor="#FF3300" />--%>
			</div>
			<%-- Thanh phan 1--%>
			<div class="DivRow">
				<div class="DivLabel" style="width: 300px; text-align: left">
					<asp:Label ID="lblSection03MucXepLoai" CssClass="TextLabel" runat="server" Text="1.Mức xếp loại nguy hiểm (theo số liệu hợp lệ có sẵn của các quốc gia,tổ chức thử nghiệm: ví dụ: EU,Mỹ,OSHA...)"></asp:Label>
				</div>
				<div class="DivTextBox">
					<asp:TextBox ID="txtS311" Width="522px" CssClass="" runat="server" TextMode="MultiLine" Rows="4" />
				</div>
			</div>
			<div style="clear: left; height: 10px">
			</div>
			<%-- Thanh phan 2--%>
			<div class="DivRow">
				<div class="">
					<asp:Label ID="lblSection03CanhBaoNH" CssClass="TextLabel" runat="server" Text="2.Cảnh báo nguy hiểm: " />
				</div>
			</div>
			<div class="DivRow">
				<asp:TextBox ID="txtS321" Width="841px" CssClass="" runat="server" TextMode="MultiLine" Rows="6" />
			</div>

			<%-- Thanh phan 3--%>

			<div style="clear: left; height: 10px">
			</div>
			<div class="DivRow">
				<div class="">
					<asp:Label ID="lblSection03CacDuongTiepXuc" CssClass="TextLabel" runat="server" Text="3.Các đường tiếp xúc và triệu trứng"></asp:Label>
				</div>
			</div>
			<div class="DivRow">
				<asp:TextBox ID="txtS331" Width="841px" CssClass="" runat="server" TextMode="MultiLine" Rows="6" />
			</div>
			<div style="clear: left; height: 10px">
			</div>
			<%-- Thanh phan 4--%>
			<div class="DivTableRow" style="border-style: none;">
				<asp:Literal runat="server" ID="ltrNguyHaiVatChat" Text="4.Nguy hại vật chất:" />
				<div style="clear: left; height: 10px">
				</div>
				<div style="width: 86%;" class="DivTextBox">
					<table id="tb1" cellpadding="0" width="99%" cellspacing="0" border="1" class="GridBorder">
						<thead>
							<tr align="center" style="height: 26px;" class="GridHeader">
								<td width='10%' class='text_list_links' align='center'></td>
								<td width='20%' class='text_list_links' align='center'>
									<asp:Literal runat="server" ID="ltrSection03TTNH0" Text="Thuộc tính nguy hiểm" />
								</td>
								<td width='20%' class='text_list_links' align='center'>
									<asp:Literal runat="server" ID="ltrSection03PL0" Text="Phân loại" />
								</td>
								<td width='50%' class='text_list_links' align='center'>
									<asp:Literal runat="server" ID="ltrSection03CT0" Text="Chi tiết" />
								</td>
							</tr>
						</thead>
					</table>
					<input id="btnAdd1" runat="server" type="button" class="btn tbAddRow" value=" Thêm " data-tbname="tb1" />
				</div>
			</div>
			<%-- Thanh phan 5--%>
			<div class="DivTableRow" style="border-style: none;">
				<asp:Literal runat="server" ID="ltrNguyHaiSucKhoe" Text="5.Nguy hại sức khỏe:" />
				<div style="clear: left; height: 10px">
				</div>
				<div style="width: 86%;" class="DivTextBox">
					<table id="tb2" cellpadding="0" width="99%" cellspacing="0" border="1" class="GridBorder">
						<thead>
							<tr align="center" style="height: 26px;" class="GridHeader">
								<td width='10%' class='text_list_links' align='center'></td>
								<td width='20%' class='text_list_links' align='center'>
									<asp:Literal runat="server" ID="ltrSection03TTNH1" Text="Thuộc tính nguy hiểm" />
								</td>
								<td width='20%' class='text_list_links' align='center'>
									<asp:Literal runat="server" ID="ltrSection03PL1" Text="Phân loại" />
								</td>
								<td width='50%' class='text_list_links' align='center'>
									<asp:Literal runat="server" ID="ltrSection03CT1" Text="Chi tiết" />
								</td>
							</tr>
						</thead>
					</table>
					<input id="btnAdd2" runat="server" type="button" class="btn tbAddRow" value=" Thêm " data-tbname="tb2" />
				</div>
			</div>
			<%-- Thanh phan 6--%>
			<div class="DivTableRow" style="border-style: none;">
				<asp:Literal runat="server" ID="ltrNguyHaiMoiTruong" Text="6.Nguy hại môi trường:" />
				<div style="clear: left; height: 10px">
				</div>
				<div style="width: 86%;" class="DivTextBox">
					<table id="tb3" cellpadding="0" width="99%" cellspacing="0" border="1" class="GridBorder">
						<thead>
							<tr align="center" style="height: 26px;" class="GridHeader">
								<td width='10%' class='text_list_links' align='center'></td>
								<td width='20%' class='text_list_links' align='center'>
									<asp:Literal runat="server" ID="ltrSection03TTNH2" Text="Thuộc tính nguy hiểm" />
								</td>
								<td width='20%' class='text_list_links' align='center'>
									<asp:Literal runat="server" ID="ltrSection03PL2" Text="Phân loại" />
								</td>
								<td width='50%' class='text_list_links' align='center'>
									<asp:Literal runat="server" ID="ltrSection03CT2" Text="Chi tiết" />
								</td>
							</tr>
						</thead>
					</table>
					<input id="btnAdd3" runat="server" type="button" class="btn tbAddRow" value=" Thêm " data-tbname="tb3" />
				</div>
			</div>
		</div>
		<div style="clear: left; height: 30px">
		</div>
		<div class="DivRow">
			<div class="DivLabel">
				&nbsp;&nbsp;&nbsp;
			</div>
			<div class="DivTextBox">
				<div style="float: left; padding-top: 10px;">
					<asp:Button ID="btnSave" runat="server" Text=" Save- Next " CssClass="btn" CausesValidation="true" OnClientClick="return SetValueForm()" />
					&nbsp; &nbsp;<asp:Button ID="btnPrevious" runat="server" CausesValidation="false" CssClass="btn" Text="Previous" />
				</div>
				<div style="float: right; text-align: right; display:none" >
					&nbsp;<asp:ImageButton ID="btnSEctionBack" ImageAlign="AbsMiddle" ToolTip="Back" runat="server" ImageUrl="~/images/back.png" />
				</div>
			</div>
		</div>
		<asp:HiddenField ID="hidMSDSID" Value="0" runat="server" ClientIDMode="Static" />
		<asp:HiddenField ID="hidID" Value="0" runat="server" ClientIDMode="Static" />
		<asp:HiddenField ID="hidValue" Value="" runat="server" ClientIDMode="Static" />
		<asp:HiddenField ID="hidOption" Value="--- Chọn ---" runat="server" ClientIDMode="Static" />
		<asp:HiddenField ID="hidDel" Value=" Xóa " runat="server" ClientIDMode="Static" />
		<asp:HiddenField ID="hidStringExists" Value="Bạn đã chọn trùng dữ liệu. vui lòng chọn khác !" runat="server" ClientIDMode="Static" />

	</ContentTemplate>
</asp:UpdatePanel>
<script type="text/javascript">
	//var previous;
	function ajaxJquery() {
		$(".TextBox:first").focus();

		//Add list
		$.each($('.tbAddRow'), function () {
			$(this).click(function () {
				// Get table name to process
				var _tablename = $(this).attr("data-tbname");
				AddRowTable(_tablename, true);
			})
		});
		// Check case edit --> Show danh sach cac option
		if ("<%=hidID.Value%>" * 1 > 0) {
			// Thực hiện action Ajax get data Section03Detail
			$.ajax({
				url: '<%=ResolveUrl("~/Services/wsAutoComplete.asmx/RenderHTMLSection03Detail")%>',
				data: "{ 'strSection03ID': '" + <%= hidID.Value%> + "'}",
				dataType: "json",
				type: "POST",
				contentType: "application/json; charset=utf-8",
				beforeSend: function () {
					$("#[id*=UpdateProgress1]").css({ 'display': 'block' });
				},
				success: function (data) {
					try {
						// Paser data to add table
						if (data.d[0].FullText != "")
							$("#tb1").append(data.d[0].FullText);
						if (data.d[1].FullText != "")
							$("#tb2").append(data.d[1].FullText);
						if (data.d[2].FullText != "")
							$("#tb3").append(data.d[2].FullText);
						//Add text Delete for all td first
						$(".BoxField table tbody tr td::first-child a").text('<%= hidDel.Value%>')

						//Add item --- Select--- in first list
						$(".BoxField table tbody tr select").prepend('<option value="0"><% =hidOption.Value %></option>');

						$("#[id*=UpdateProgress1]").css({ 'display': 'none' });

						//make sure select return old value when choose item is exists
						$("select.OtherList").one('focus', function () {
							// Store the current value on focus and on change
							$(this).data('oldValue', this.value);
						});

					} catch (e) { $("#[id*=UpdateProgress1]").css({ 'display': 'none' }); }
				},
				error: function (XMLHttpRequest, textStatus, errorThrown) {
					//Alertbox(textStatus);
					$("#[id*=UpdateProgress1]").css({ 'display': 'none' });
				}
			});
		}
	}

	function AddRowTable(_tableName) {
		//Them dong
		var index = 0;
		index = Math.floor(Math.random() * 100);

		var _otherListTable = _tableName + "_select_" + index + "1";
		var _otherList = _tableName + "_select_" + index + "2";

		$("#" + _tableName).append("<tr id='" + index + "' >"
		  + "<td Width='10%' class='text_list_links' align='center' >"
		  + " <a  class='delbutton' style='cursor:pointer;' onclick=\"RemoveRow(this);\" > <%=hidDel.Value %> </a> "
			  + " </td> "
			  + "  <td Width='20%' class='text_list_links' align='left' >"
			  + "  <select class='OtherListTable DropDownList'  onchange='SetOtherList(this);' id='" + _otherListTable + "'>"
			  + "    <option value='0' > <% =hidOption.Value %> </option> "
			  + "</select>"
			  + "   </td>"
			  + "     <td Width='20%' class='text_list_links' align='left' > "
			  + "     <select class='OtherList DropDownList' onchange='SetOtherListDetail(this);' id='" + _otherList + "'>"
			  + "    <option value='0' > <% =hidOption.Value %> </option></select>"
			  + "   </td> "
			  + "   <td Width='20%' class='text_list_links' align='left' >"
			  + " <div  class='Detail' id='" + _tableName + "_div_" + index + "'  ></div></td></tr>");
		try {
			//Add item cho OtherListTable
			SetOtherListTable(_otherListTable, _tableName.substring(2, 3), $("#" + _tableName + " tbody tr").size());
		} catch (e) {
		}
		return index;
	}

	// Load OtherListTable
	function SetOtherListTable(_otherListTable, _type, _size) {
		if (_size * 1 == 1) {// Thực hiện Ajax tạo dropdownlist
			$.ajax({
				url: '<%=ResolveUrl("~/Services/wsAutoComplete.asmx/GetOtherListTableByType")%>',
					data: "{ 'strType': '" + _type + "'}",
					dataType: "json",
					type: "POST",
					contentType: "application/json; charset=utf-8",
					success: function (data) {
						var _html = "<option value='0'> <% =hidOption.Value %> </option>";
						$.each(data.d, function (idx, obj) {
							_html += ("<option value='" + obj.ID + "'>" + obj.FullText + "</option>");
						});

						$("#" + _otherListTable).html(_html);
					}
				});
				} else {// Clone dropdownlist của dòng đầu tiên cho các dòng khác
				//$("#" + _otherListTable.substring(0, 3) + " tbody tr:first select:first option").clone().appendTo($("#" + _otherListTable));
					$("#" + _otherListTable).html($("#" + _otherListTable.substring(0, 3) + " tbody tr:first select:first").html());
					$("#" + _otherListTable).val('0');
				}
	}

	function SetOtherList(obj) {
		$.ajax({
			url: '<%=ResolveUrl("~/Services/wsAutoComplete.asmx/GetOtherList")%>',
			data: "{ 'strSrc': '" + obj.value + "'}",
			dataType: "json",
			type: "POST",
			contentType: "application/json; charset=utf-8",
			success: function (data) {
				var _html = "<option value='0'>  <% =hidOption.Value %> </option>";
				$.each(data.d, function (idx, obj) {
					_html += ("<option value='" + obj.ID + "'>" + obj.FullText + "</option>");
				});
				var _nameControl = obj.id;
				_nameControl = _nameControl.substring(0, _nameControl.length - 1) + "2";
				$("#" + _nameControl).html(_html);
			},
			error: function (XMLHttpRequest, textStatus, errorThrown) {
				//Alertbox(textStatus);
			}
		});
			var divName = obj.id.substring(0, obj.id.length - 1).replace(/select/, "div")
			$("#" + divName).html("");
		}

		// Show detail
		function SetOtherListDetail(obj) {
			// Get Select control Name same row
			var otherListtableName = obj.id.substring(0, obj.id.length - 1) + "1";
			var _olTB = $("#" + otherListtableName + " option:selected").val().trim();
			var _ol = obj.value.trim();
			var _rowID = $(obj).closest("tr").attr("id");
			//check value is exists
			var _isexists = false;
			$("#" + obj.id.substring(0, 3) + " tbody tr:not(#" + _rowID + ")").each(function () {
				if ($(this).find(".OtherListTable").val().trim() == _olTB && $(this).find(".OtherList").val().trim() == _ol) {
					_isexists = true;
					return false;
				}
			});
			if (_isexists) {
				Alertbox('<% =hidStringExists.Value %>');
				//console.log(previous);
				if ($(obj).closest("tr").find("div.Detail").html() == "")
					$(obj).val('0');
				else
					$(obj).val($(obj).data('oldValue'));
			} else {
				$.ajax({
					url: '<%=ResolveUrl("~/Services/wsAutoComplete.asmx/GetOtherListDetail")%>',
					data: "{ 'strIdOtherListTable': '" + _olTB + "','strIdOtherList': '" + _ol + "'}",
					dataType: "json",
					type: "POST",
					contentType: "application/json; charset=utf-8",
					success: function (data) {
						var divName = obj.id.substring(0, obj.id.length - 1).replace(/select/, "div")
						$("#" + divName).html(data.d);
					}
				});
			}
			//previous = obj.value;
			$(obj).data('oldValue', obj.value)
		}

		// Xoa dong
		function RemoveRow(obj) {
			$(obj).closest("tr").fadeOut(500, function () {
				$(this).remove();
			});
			return false;
		}

		function SetValueForm() {
			var strValue = "";
			$(".BoxField table[@id^=tb] tbody tr").each(function (e) {
				try {
					var _otherListTable = $(this).find(".OtherListTable").val().trim();
					var _otherList = $(this).find(".OtherList").val().trim()
					if (_otherListTable != "0" && _otherList != "0") {
						strValue += _otherListTable + "#" + _otherList + "$";
					}
				} catch (e) {
				}

			});
			$("#hidValue").val(strValue);
			return true;
		}

</script>
